import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xindong/common/xindong_methods.dart';
import 'package:xindong/routes/call/controller/xindong_call_controller.dart';
import 'package:xindong/routes/call/controller/xindong_call_rtc_controller.dart';
import 'package:xindong/routes/call/dialog/xindong_call_mini_video_dialog.dart';
import 'package:xindong/utils/xindong_image_util.dart';

// 视频小窗口
class XinDongCallRTCVideoSmallView extends StatelessWidget {
  const XinDongCallRTCVideoSmallView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 130,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
      child: GetBuilder<XinDongCallRTCController>(
        builder: (controller) {
          return Stack(
            alignment: Alignment.center,
            children: [
              // 视频层
              _buildVideoView(controller),
              // 提示层
              _buildCameraOffView(controller),
              // 蒙层+全屏按钮
              GetBuilder<XinDongCallController>(builder: (callController) {
                return GestureDetector(
                  onTap: () {
                    if (callController.status == XinDongCallStatus.minimize) {
                      controller.showFullScreen();
                    } else {
                      if ((controller.isMineBigVideoWindow && controller.targetVideoAvailable) ||
                          (!controller.isMineBigVideoWindow && !controller.isCameraOff)) {
                        bool mineBigVideo = controller.isMineBigVideoWindow;
                        controller.changeVideoView(!mineBigVideo);
                      } else {
                        mDebugPrint("不支持切换大小屏");
                      }
                    }
                  },
                  behavior: HitTestBehavior.opaque,
                  child: _buildButton(controller),
                );
              }),
            ],
          );
        },
      ),
    );
  }

  Widget _buildVideoView(XinDongCallRTCController controller) {
    return controller.isSmallShowTargetVideo ? controller.targetVideoView : controller.mineVideoView;
  }

  Widget _buildCameraOffView(XinDongCallRTCController controller) {
    bool showTarget = controller.isSmallShowTargetVideo;
    // 对方视频画面可见
    if (showTarget && controller.targetVideoAvailable) {
      return const SizedBox();
    }
    // 我方摄像头开启
    if (!showTarget && !controller.isCameraOff) {
      return const SizedBox();
    }
    return Container(
      alignment: Alignment.center,
      color: Colors.black38,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            margin: const EdgeInsets.only(left: 8, right: 4),
            width: 40,
            height: 40,
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(32)),
            child: ImageUtil.avatarUrl(showTarget
                ? XinDongCallController.to.targetUser.getAvatar
                : XinDongCallController.to.mineUser.getAvatar),
          ),
          const SizedBox(height: 8),
          Text(
            showTarget ? "没有接收到\n对方画面" : "您已关闭\n摄像头",
            style: const TextStyle(color: Colors.white, fontSize: 12),
            textAlign: TextAlign.center,
          )
        ],
      ),
    );
  }

  Widget _buildButton(XinDongCallRTCController controller) {
    if (XinDongCallController.to.status != XinDongCallStatus.minimize) {
      return Container();
    }
    bool showTarget = controller.isSmallShowTargetVideo;
    // 对方视频画面不可见
    if (showTarget && !controller.targetVideoAvailable) {
      return Container();
    }
    // 我方摄像头关闭
    if (!showTarget && controller.isCameraOff) {
      return Container();
    }
    return Obx(() => XinDongCallMiniVideoDialog.instance.isShowClick.value
        ? Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.black45,
            alignment: Alignment.center,
            child: const Icon(Icons.fullscreen, size: 30, color: Colors.white),
          )
        : Container());
  }
}
